<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea id="demo" cols="30" rows="10"></textarea>
</body>
<script>
    // 键盘相关的事件
    // onkeydown    按键按下时触发  => 所有按键均可触发  (控制键位 + 写入键位)
    // onkeyup      按键松开时触发  => 所有按键均可触发

    // onkeypress   按键按下并松开时触发(实际: 按键按下时触发  => 写入相关的按键可以触发 数字 字母 标点符号  enter  space) 

    // 如何绑定键盘事件?
    // (1) 绑定给document => 在页面任何位置按下按键均可触发 (快捷键 ctrl+c  ,游戏(页面控制))
    // (2) 绑定给表单控件(input textarea) => 输入时触发


    // 如何知道键盘按下了哪个按键?
    // 浏览器侦听到事件触发后,执行对应的事件处理函数  => 并传入事件对象,存储事件触发时相关的信息(什么时间 发生了什么类型的事件 发生在谁身上 鼠标按下的按键  鼠标的位置 键盘按下的按键)
    //  e.code  按键对应的键位
    //  e.key   按键对应的字符

    // document.onkeydown = function(e){
    //     console.log("按键被按下",e.code,e.key);
    // }

    // document.onkeyup = function(e){
    //     console.log("按键松开",e.code,e.key);
    // }

    // document.onkeypress = function(e){
    //     console.log("按键被按下",e.code,e.key);
    // }


    var demo = document.getElementById("demo");

    //  demo.onkeydown = function(e){
    //     console.log("按键被按下",e.code,e.key);
    // }

    // demo.onkeyup = function(e){
    //     console.log("按键松开",e.code,e.key);
    // }


    demo.onkeypress = function(e){
        console.log("按键被按下",e.code,e.key);
    }



</script>
</html>